<template>
  <div>
    <div>
      粉丝列表
    </div>
    <!-- 查询 -->
    <div>
      <el-form inline label-width="100px" label-position="left">
        <el-form-item label="粉丝用户名称">
          <el-input v-model="queryForm_followingInfo.username" placeholder="粉丝用户名称"></el-input>
        </el-form-item>
        <!--查询按钮-->
        <el-button type="text" @click="getFollowerList">查询</el-button>
      </el-form>
    </div>
    <div>
      <el-card>
        <el-row>
          <el-col
              :lg="6"
              :md="8"
              :sm="12"
              :xs="24"
              v-for="(following,index) in followerList" :key="index">
            <el-card >
              <div style="cursor: pointer"  @click="goToAuthorPage(following.userName)">
                <el-tag type="primary" size="normal">
                  <i class="el-icon-user"></i>
                  {{following.userName}}
                </el-tag>
                <el-button type="text" size="mini" @click="goToAuthorPage(following.userName)">进入主页</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <!-- 分页-->
    <div>
      <el-pagination
          @size-change="handleSizeChange_followingInfo"
          @current-change="handleCurrentChange_followingInfo"
          :current-page="currentPage_followingInfo"
          :page-sizes="[1,2,3,4,5,10, 20, 30, 50]"
          :page-size="pageSize_followingInfo"
          layout="total, sizes, prev, next, jumper"
          :total="total_followingInfo"
      /><!--去掉 pager-->
    </div>
  </div>

</template>

<script>
import {get_followingDetailInfo} from "@/api/followingDetails";
import {getUserName} from "@/api/token";

export default {
  name: "ArticleFollower",
  data() {
    return {
      queryForm_followingInfo:{
        username:'',
        pageNum: 1,
        pageSize: 4,
        followingUserName:''
      },
      // 当前显示页数
      currentPage_followingInfo: 1,
      // 每页大小
      pageSize_followingInfo: 4,
      // 总数量
      total_followingInfo: 0,

      followerList:[
        // {
        //   followingUserName:'6008',
        // },
      ]
    }
  },
  mounted() {
    this.getFollowerList()
  },
  methods: {
    // 分页栏换条数
    handleSizeChange_followingInfo(val) {
      this.queryForm_followingInfo.pageSize = val
      this.queryForm_followingInfo.pageNum = 1
      this.getFollowerList(this.queryForm_followingInfo)
    },
    // 选择页数
    handleCurrentChange_followingInfo(val) {
      this.queryForm_followingInfo.pageNum = val
      this.getFollowerList(this.queryForm_followingInfo)
    },
    /**
     * 跳转到作者页面
     */
    goToAuthorPage(authorName){
      this.$router.push({
        path: '/index/author-info',
        query: {
          authorName:authorName
        }
      })
    },
    /**
     * 获取粉丝列表
     */
    getFollowerList() {
      this.queryForm_followingInfo.followingUserName = getUserName()
      get_followingDetailInfo(this.queryForm_followingInfo).then((res)=>{
        // console.log('我的粉丝列表',res)
        if(res.code===200){
          this.followerList = res.data['tableData']
          this.total_followingInfo = res.data.total
        }
      }).catch((err)=>{

      })
    }
  }
}
</script>

<style scoped>

</style>